import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useThemeStore = defineStore('theme', () => {
  const currentTheme = ref<string>(localStorage.getItem('theme') || 'light')

  const themes = {
    light: {
      '--el-color-primary': '#215fa6',
      '--el-color-primary-light-3': '#5d92dd',
      '--el-color-primary-light-8': '#d5e3ff',
      '--el-color-primary-light-9': '#ebf1ff',
      '--el-color-primary-dark-2': '#003b73',
      '--el-bg-color-page': '#fdfbff',
      '--el-bg-color-overlay': '#ffffff',
      '--el-text-color-primary': '#1a1c1e',
      '--el-border-color-light': '#e0e2ec',
      '--sidebar-bg': '#0a3d62',
      '--sidebar-text': '#ffffff',
      '--sidebar-hover': '#0f4d7a',
      '--sidebar-active': '#125a8c',
      '--logo-bg': 'linear-gradient(135deg, #215fa6 0%, #0a3d62 100%)'
    },
    dark: {
      '--el-color-primary': '#a6c8ff',
      '--el-color-primary-light-3': '#79adf9',
      '--el-color-primary-light-8': '#004787',
      '--el-color-primary-light-9': '#003060',
      '--el-color-primary-dark-2': '#d5e3ff',
      '--el-bg-color-page': '#1a1c1e',
      '--el-bg-color-overlay': '#2f3033',
      '--el-text-color-primary': '#e3e2e6',
      '--el-border-color-light': '#43474e',
      '--sidebar-bg': '#0f172a',
      '--sidebar-text': '#e2e8f0',
      '--sidebar-hover': '#1e293b',
      '--sidebar-active': '#334155',
      '--logo-bg': 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)'
    },
    blue: {
      '--el-color-primary': '#2563eb',
      '--el-color-primary-light-3': '#60a5fa',
      '--el-color-primary-light-8': '#dbeafe',
      '--el-color-primary-light-9': '#eff6ff',
      '--el-color-primary-dark-2': '#1d4ed8',
      '--el-bg-color-page': '#f8fafc',
      '--el-bg-color-overlay': '#ffffff',
      '--el-text-color-primary': '#1e293b',
      '--el-border-color-light': '#e2e8f0',
      '--sidebar-bg': '#1e40af',
      '--sidebar-text': '#ffffff',
      '--sidebar-hover': '#2563eb',
      '--sidebar-active': '#3b82f6',
      '--logo-bg': 'linear-gradient(135deg, #1e40af 0%, #2563eb 100%)'
    },
    purple: {
      '--el-color-primary': '#7c3aed',
      '--el-color-primary-light-3': '#a78bfa',
      '--el-color-primary-light-8': '#ede9fe',
      '--el-color-primary-light-9': '#f5f3ff',
      '--el-color-primary-dark-2': '#6d28d9',
      '--el-bg-color-page': '#fafafa',
      '--el-bg-color-overlay': '#ffffff',
      '--el-text-color-primary': '#1f2937',
      '--el-border-color-light': '#f3f4f6',
      '--sidebar-bg': '#5b21b6',
      '--sidebar-text': '#ffffff',
      '--sidebar-hover': '#6d28d9',
      '--sidebar-active': '#7c3aed',
      '--logo-bg': 'linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%)'
    },
    green: {
      '--el-color-primary': '#059669',
      '--el-color-primary-light-3': '#34d399',
      '--el-color-primary-light-8': '#d1fae5',
      '--el-color-primary-light-9': '#ecfdf5',
      '--el-color-primary-dark-2': '#047857',
      '--el-bg-color-page': '#f0fdf4',
      '--el-bg-color-overlay': '#ffffff',
      '--el-text-color-primary': '#064e3b',
      '--el-border-color-light': '#dcfce7',
      '--sidebar-bg': '#065f46',
      '--sidebar-text': '#ffffff',
      '--sidebar-hover': '#047857',
      '--sidebar-active': '#059669',
      '--logo-bg': 'linear-gradient(135deg, #065f46 0%, #059669 100%)'
    },
    orange: {
      '--el-color-primary': '#ea580c',
      '--el-color-primary-light-3': '#fdba74',
      '--el-color-primary-light-8': '#ffedd5',
      '--el-color-primary-light-9': '#fff7ed',
      '--el-color-primary-dark-2': '#c2410c',
      '--el-bg-color-page': '#fff7ed',
      '--el-bg-color-overlay': '#ffffff',
      '--el-text-color-primary': '#431407',
      '--el-border-color-light': '#fed7aa',
      '--sidebar-bg': '#9a3412',
      '--sidebar-text': '#ffffff',
      '--sidebar-hover': '#c2410c',
      '--sidebar-active': '#ea580c',
      '--logo-bg': 'linear-gradient(135deg, #9a3412 0%, #ea580c 100%)'
    }
  }

  const applyTheme = (themeName: string) => {
    const theme = themes[themeName as keyof typeof themes]
    if (!theme) return

    Object.entries(theme).forEach(([property, value]) => {
      document.documentElement.style.setProperty(property, value)
    })

    // 更新html的data-theme属性
    document.documentElement.setAttribute('data-theme', themeName)
    
    // 保存到localStorage
    localStorage.setItem('theme', themeName)
    currentTheme.value = themeName
  }

  const setTheme = (themeName: string) => {
    applyTheme(themeName)
  }

  // 初始化时应用主题
  applyTheme(currentTheme.value)

  // 监听系统主题变化
  if (window.matchMedia) {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    mediaQuery.addEventListener('change', (e) => {
      if (!localStorage.getItem('theme')) {
        applyTheme(e.matches ? 'dark' : 'light')
      }
    })
  }

  return {
    currentTheme,
    setTheme,
    applyTheme
  }
})